<template>
  <div class="channels">
    <!-- 下拉刷新的组件 -->
    <van-pull-refresh v-model="isrefreshFlag"
    :success-text="pull_success_text"
    success-duration="1500"
    @refresh="onRefresh">
      <!-- list列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.title" /> -->
        <article-item
        v-for="(item,index) in list"
        :key="index"
        :itemInfo="item"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/channels/channels'
import articleItem from '@/components/article'
export default {
  name: 'channels',
  data () {
    return {
      list: [], // 存放对应频道的数据
      loading: false, // 显示加载状态，转圈圈
      finished: false, // 如果数据没有就会在底部显示没有更多了的字段
      // 上一次请求数据的时间戳
      pre_timestamp: 0,
      // 加载失败的提示，可以点击失败信息触发重新加载
      error: false,
      // 控制下拉刷新组件的falg
      isrefreshFlag: false,
      // 下拉刷新成功的提示文本
      pull_success_text: '刷新成功'
    }
  },
  props: {
    // 这种接受channels数据时，可以使用特定语法对其校验
    channels: {
      // 表示channels这个必须是对象，
      type: Object,
      // 表示channels为必填项
      required: true
    }
  },
  created () {

  },
  components: {
    'article-item': articleItem
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      try {
        const res = await getUserChannels({
          channel_id: this.channels.id,
          with_top: 1,
          timestamp: this.pre_timestamp || Date.now()
        })
        this.list.push(...res.data.data.results)
        // 如果数据还有，就将时间戳赋值
        if (res.data.data.results.length) {
          this.pre_timestamp = res.data.data.pre_timestamp
        } else {
          // 如果请求回来的数组长度为0，说明没有数据了
          // 数据全部加载完成
          this.finished = true
        }
        // console.log(res)
        //
      } catch (err) {
        this.error = true
        this.loading = false
      }
      // 关闭loading
      this.loading = false
    },

    // 下拉刷新触发的函数，那就要发起请求，获取最新数据
    async onRefresh () {
      try {
        const res = await getUserChannels({
          channel_id: this.channels.id,
          with_top: 1,
          timestamp: Date.now()
        })
        // 这个时候就要用unshift，将最新的往前推
        this.list.unshift(...res.data.data.results)
        this.pull_success_text = '刷新成功，更新了' + res.data.data.results.length + '数据'
        // console.log(res)
        //
      } catch (err) {
        this.pull_success_text = '刷新失败，请重试！'
      }
      this.isrefreshFlag = false
    }
  }
}
</script>

<style scoped lang='less'>
.channels {
  overflow-y: auto;
  height: 79vh;
}
</style>
